<template>
  <div style="padding-left: 15px;position: relative">
    <el-card id="tree" style="float:left;margin-right: 10px;height:100%;width:13%;background-color: transparent;border-color: transparent;">
      <el-input
          placeholder="输入关键字进行过滤"
          v-model="filterText">
      </el-input>
      <el-tree style="margin-top: 12px;"
               class="filter-tree"
               :data="this.$store.state.data"
               :highlight-current="true"
               node-key="id"

               current-node-key="id"
               :expand-on-click-node="true"
               :props="defaultProps"

               accordion
               @node-click="handleNodeClick"
               :filter-node-method="filterNode"
               ref="tree">
      </el-tree>
    </el-card>
    <!--专门用于导入shp文件-->
    <div class="uploadFile" style="height:80px;width:200px;background-color: transparent;border-color: green;position: absolute;left: 200px;top:20px">
      <el-upload
          class="upload-shp"
          ref="upload"
          action="http://47.119.187.14:9006/file/upload"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :headers = header
          :file-list="fileList"
          :auto-upload="false">
        <div slot="tip" class="el-upload__tip" style="width:500px;color: white;position: absolute;left: 180px;top:2px">只能上传shp文件，且不超过30M</div>
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">提交文件</el-button>
<!--        <el-button style="margin-left: 10px;" @click="refresh">刷新</el-button>-->
      </el-upload>
    </div>


    <div style="float:left;width:85%;padding: 20px 20px 0px 700px;background-color: transparent">
      <el-input id="tableName" placeholder="请输入数据表名" style="width:150px" v-model="tableForm.name"></el-input>
      <el-select  v-model="tableForm.father" placeholder="请选择数据类型" @change="selectDataType">
        <el-option
            v-for="item in this.tableTypeSelect"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-upload
          :action="myAction"
          :show-file-list="false"
          accept="xlsx"
          :on-success="handleExcelImportSuccess"
          :before-upload="beforeUpload"
          style="display: inline-block">
        <el-button type="primary" style="margin-left: 10px;" @click="importClick">导入 <i class="el-icon-bottom"></i></el-button>
      </el-upload>
      <el-button type="primary" @click="exp" style="margin-left: 10px;">导出 <i class="el-icon-top"></i></el-button>
    </div>

    <div id="table" style="position:absolute;top:80px;left:210px;height:100%;width:84%;">
      <div v-if="parentData==='点数据'">
        <el-table :data="tableData1"  style="width:100%;margin-top: 10px;"  border stripe  @selection-change="handleSelectionChange">
          <el-table-column type="selection"></el-table-column>
          <el-table-column prop="id" label="ID" ></el-table-column>
          <!--      <el-table-column prop="file_name" label="文件名" width="100"></el-table-column>-->
          <el-table-column prop="opera" label="运营公司" ></el-table-column>
          <el-table-column prop="cid" label="车辆ID" ></el-table-column>
          <el-table-column prop="time" label="时间"></el-table-column>
          <el-table-column prop="lng" label="纬度"></el-table-column>
          <el-table-column prop="lat" label="经度"></el-table-column>
          <el-table-column prop="grid" label="网格id"></el-table-column>
          <el-table-column prop="road" label="路链id"></el-table-column>
          <el-table-column prop="speed" label="速度"></el-table-column>
          <el-table-column prop="direct" label="方向"></el-table-column>
          <el-table-column prop="hstate" label="乘车状态"></el-table-column>
          <el-table-column prop="cstate" label="车辆状态"></el-table-column>
          <el-table-column prop="other" label="其它"></el-table-column>
        </el-table>
      </div>
      <div v-else-if="parentData==='OD线数据'">
        <el-table :data="tableData1" style="width:100%;margin-top: 10px;" border stripe >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="olng" label="起点经度" ></el-table-column>
          <el-table-column prop="olat" label="起点纬度" ></el-table-column>
          <el-table-column prop="dlng" label="终点经度"></el-table-column>
          <el-table-column prop="dlat" label="终点纬度"></el-table-column>
        </el-table>
      </div>

      <div v-else-if="parentData==='轨迹线数据'">
        <el-table :data="tableData1" border stripe style="margin-top: 10px">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="time" label="时间戳"></el-table-column>
          <el-table-column prop="status" label="载客状态" ></el-table-column>
          <el-table-column prop="lng" label="经度" ></el-table-column>
          <el-table-column prop="lat" label="纬度"></el-table-column>
          <!--          <el-table-column prop="dlng" label="终点经度"></el-table-column>-->
          <!--          <el-table-column prop="dlat" label="终点维度"></el-table-column>-->
        </el-table>
      </div>

      <!--判断展示shp数据 右侧表-->
      <div v-else-if="parentData==='shp数据'">
        <!--<h2>{{parentData}}</h2>-->
        <el-table :data="tableData1"  border stripe style="margin-top: 10px">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="id" label="id" ></el-table-column>
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="size" label="文件大小" ></el-table-column>
        </el-table>
      </div>
      <!-- 被注释分页代码-->
      <div style="background-color: transparent;margin-top: 20px">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
      </div>
    </div>


      <el-dialog title="数据结构" :visible.sync="dialogFormVisible" width="30%" >
        <el-form label-width="80px" size="small" style="padding: 0 25px 0 0;">
          <!--        <el-form-item label="文件名">-->
          <!--          <el-input v-model="form.file_name" autocomplete="off"></el-input>-->
          <!--        </el-form-item>-->
          <el-form-item label="运营公司">
            <el-input v-model="form.opera" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="时间">
            <el-input v-model="form.time" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="纬度">
            <el-input v-model="form.lng" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="网格id">
            <el-input v-model="form.grid" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="路链id">
            <el-input v-model="form.road" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="速度">
            <el-input v-model="form.speed" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="方向">
            <el-input v-model="form.direct" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="乘车状态">
            <el-input v-model="form.hstate" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="车辆状态">
            <el-input v-model="form.cstate" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="其它">
            <el-input v-model="form.other" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-dialog>

  </div>
</template>

<script>
import {serverIp} from "../../../public/config";

export default {
  name: "User",
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  computed:{
    // 执行上传动作的后台接口
    myAction(){
      if (this.selectType === '点数据'){
        return this.baseURL + '/taxiData/import'
      }else if(this.selectType === '轨迹线数据'){
        return this.baseURL + '/traceData/import'
      }else if(this.selectType === 'OD线数据'){
        return this.baseURL + '/lineData/import'
      }else{
        return ''
      }
    }
  },

  data(){
    return{
      //id:"",
      daoruData:'',
      parentData:'点数据',
      selectType:'',
      currentNode:'',
      firstLevelNode:'',
      tableTypeSelect: [
        {
          value: '点数据',
          label: '点数据'
        },
        {
          value: '轨迹线数据',
          label: '轨迹线数据'
        },
        {
          value: 'OD线数据',
          label: 'OD线数据'
        },

      ],
      isShow: 'true',
      // baseURL:'http://10.100.58.105:9090',//w
      baseURL:'http://47.119.187.14:9006',//阿里云
      // baseURL:'http://10.100.4.129:9090',//徐少壮
      tableForm:{},
      menuIds: {},
      tableName: '',
      tableType: '',
      tableData:[],
      tableData1:[], //这里是从后端获取的所有数据
      pagetableData:[],//分页后的当前页数据

      total: 0,  //总数据条数
      pageNum:1, //当前所在页默认是第一页
      pageSize:10, //每页显示多少行数据 默认设置为10
      username: "",
      password:"",
      nickname:"",
      email: "",
      address: "",
      avatar:"" ,
      dialogFormVisible:false,
      multipleSelection: [],
      form:{},
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'label'
      },

      tableNameTem:'',

      //用于上传shp文件的存储变量名
      fileList: [],
      header:{
        token:window.sessionStorage.getItem('token')
      }
    }
  },
  created() {

    this.$store.commit('loadMenuData')
    // console.log(this.$store.state.data)
    // this.loadMenuSet()
    // this.loadData()
  },
  methods:{
    load(){
      if (this.parentData === '点数据'){
        // /taxiData/page  接口里分页的代码调整
        this.request.get("/taxiData/clickLabel",
            {
              params:{
                tableNameTem: this.tableNameTem,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
              }
            },
        ).then(res => {
          console.log(res.data,'点数据')
          this.tableData1 = []
          this.tableData1 = res.data
          this.total = res.count
        })
      }else if(this.parentData === '轨迹线数据'){
        this.request.get("/traceData/clickLabel",
            {
              params:{
                tableNameTem: this.tableNameTem,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
              }
            },
        ).then(res => {
          console.log(res,'轨迹线数据')
          console.log(res.count);
          this.tableData1 = []
          this.tableData1 = res.data
          this.total = res.count
        })
      }else if(this.parentData === 'OD线数据'){
        // "/lineData/clickFileMapperLabel"
        this.request.get("/lineData/clickLabel",
            {
              params:{
                tableNameTem: this.tableNameTem,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
              }
            },
        ).then(res => {
          console.log(res,'后台返回的OD线数据')
          this.tableData1 = []
          this.tableData1 = res.data
          console.log(this.tableData1,'this.tableData1');
          this.total = res.count
        })
      }else if(this.parentData === 'shp数据'){
        console.log(1111);
        this.request.get("/file/page",
            {
              params:{
                name: this.tableNameTem,
                pageNum: this.pageNum,
                pageSize: this.pageSize
              }
            },
        ).then(res => {
          console.log(res.data);
          this.tableData1 = [];
          this.tableData1 = res.data.records;
          console.log(this.tableData1, "this.tableData1");
          // this.total = res.count
          this.total = res.data.total;
        })
      }
      // this.request.get("/taxiData/page",
      //     {
      //       params: {
      //         pageNum: this.pageNum,
      //         pageSize: this.pageSize,
      //       }
      //     }).then(res => {
      //   console.log(res.data)
      //   this.tableData = res.data.records
      //   this.total = res.data.total
      // })
    },
    handleSizeChange(pageSize) {
      console.log(pageSize,`每页${pageSize}条`)
      this.pageSize = pageSize
      //数据重新分页
      // this.getPageInfo();
      this.load()
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum,`当前页：${pageNum}`)
      this.pageNum = pageNum
      //数据重新分页
      // this.getPageInfo();
      this.load()
    },
    handleAdd() {
      this.dialogFormVisible = true
      this.form = {}
    },
    handleEdit(row) {
      this.form = row
      // console.log(row)
      // console.log(this.form)
      this.dialogFormVisible = true
    },

    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    selectDataType(data){
      // 将data对象解构
      this.selectType = data
      console.log(this.selectType,'data');
    },
    beforeUpload(){
      // console.log(this.daoruData,'初始链接');
      // if ((document.getElementById('tableName').value !== '') && (this.selectType === '点数据')){
      //   // this.daoruData = `http://`+serverIp+`/taxiData/import`
      //   // this.daoruData = 'http://10.100.58.105:9090/taxiData/import'
      //   this.$message.error("导入点数据")
      //
      // }else{
      //   this.daoruData = `http://10.100.58.105:9090/lineData/import`
      //   this.$message.error("导入线数据")
      // }
      // console.log(this.myAction,'使用链接');
    },

    importClick(){
      this.request.post("/dataMenu/add", this.tableForm).then(res => {
        if (res.data) {
          // this.$message.success("保存成功")
          this.dialogFormVisible = false
          //this.load()
        } else {
          this.$message.error("保存失败")
        }
      });
    },
    // 文件保存到数据库
    save() {
      this.request.post("/dataMenu", this.form).then(res => {
        if (res.data) {
          this.$message.success("保存成功")
          this.dialogFormVisible = false
          this.load()
        } else {
          this.$message.error("保存失败")
        }
      })
    },

    exp() {
      // 如果点击的是下拉菜单的一级节点，则导出一级节点下的所有数据
      // 如果点击的是下拉菜单的二级节点，则导出二级节点对应的数据
      if ((this.currentNode ==='1')&& (this.firstLevelNode === '点数据')){
        window.open(`http://${serverIp}/taxiData/export`)
      }else if((this.currentNode ==='1')&& (this.firstLevelNode === '轨迹线数据')){
        window.open(`http://${serverIp}/traceData/export`)
      }else if((this.currentNode ==='1')&& (this.firstLevelNode === 'OD线数据')){
        window.open(`http://${serverIp}/lineData/export`)
      }else if((this.currentNode) ==='2'&&(this.parentData==='点数据')){
        //当选择二级下拉菜单导出的时候，二级下拉菜单的nameTable没有值
        window.open(`http://${serverIp}/taxiData/exportNode?tableNameTem=`+ this.tableNameTem)
      }
      else if((this.currentNode) ==='2'&&(this.parentData==='轨迹线数据')){
        //当选择二级下拉菜单导出的时候，二级下拉菜单的nameTable没有值
        window.open(`http://${serverIp}/traceData/exportNode?tableNameTem=`+ this.tableNameTem)
      }
      else if((this.currentNode) ==='2'&&(this.parentData==='OD线数据')){
        //当选择二级下拉菜单导出的时候，二级下拉菜单的nameTable没有值
        window.open(`http://${serverIp}/lineData/exportNode?tableNameTem=`+ this.tableNameTem)
      }
    },

    handleExcelImportSuccess() {
      this.$message.success("导入成功")
      //this.load()
    },

    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 获取当前页的数据信息
    getPageInfo(){
      console.log('getPageInfo方法开始');
      //清空pagetableData中的数据
      this.pagetableData=[];
      // 获取当前页的数据
      for(let i=(this.pageNum-1)*this.pageSize;i<this.total;i++){
        //把遍历的数据添加到pageTicket里面
        this.pagetableData.push(this.tableData1[i]);
        //判断是否达到一页的要求
        if(this.pagetableData.length===this.pagesize) break;
      }
      console.log(this.pagetableData,'this.pagetableData');
    },

    //处理左侧树形下拉框点击事件
    handleNodeClick(defaultKeys,node) {
      //判断当前点击的是哪一层节点；1、最外层父节点；2、第二次层子节点；3、末层节点内容；4、.....以此类推
      // 并根据点击的内容显示不同的数据
      // 部分变量赋值为空是为了处理来回点击节点数据传值错误而写的
      if(node.level == 1){
        this.currentNode = String(node.level)
        this.firstLevelNode = node.label
        console.log(this.firstLevelNode,'this.firstLevelNode');
        // this.companyName = name
        // this.gradeName = ''
      } else if (node.level == 2){
        this.currentNode = String(node.level)
        // this.gradeName = name
        //当前节点的父节点
        this.parentData = node.parent.data.label
        //当前节点
        this.tableNameTem = node.label;
        console.log(this.tableNameTem,'当前节点');
        console.log(this.parentData,'当前节点的父节点');

        if (this.parentData === '点数据'){
          // /taxiData/page  接口里分页的代码调整
          this.request.get("/taxiData/clickLabel",
              {
                params:{
                  tableNameTem: this.tableNameTem,
                  pageNum: this.pageNum,
                  pageSize: this.pageSize,
                }
              },
          ).then(res => {
            console.log(res,'点数据')
            // this.tableData1 = []
            this.tableData1 = res.data
            //获取返回记录的总行数
            this.total = res.count
            console.log(this.total,'this.total');
            this.getPageInfo();       //在这里调用获取当前页的数据信息方法

          })
        }else if(this.parentData === '轨迹线数据'){
          this.request.get("/traceData/clickLabel",
              {
                params:{
                  tableNameTem: this.tableNameTem,
                  pageNum: this.pageNum,
                  pageSize: this.pageSize,
                }
              },
          ).then(res => {
            console.log(res,'轨迹线数据')
            this.tableData1 = []
            this.tableData1 = res.data
            this.total = res.count
          })
        }else if(this.parentData === 'OD线数据'){
          // "/lineData/clickFileMapperLabel"
          this.request.get("/lineData/clickLabel",
              {
                params:{
                  tableNameTem: this.tableNameTem,
                  pageNum: this.pageNum,
                  pageSize: this.pageSize,
                }
              },
          ).then(res => {
            console.log(res,'后台返回的OD线数据')
            this.tableData1 = []
            this.tableData1 = res.data
            console.log(this.tableData1,'this.tableData1');
            this.total = res.count
          })
        }else if(this.parentData === 'shp数据'){
          console.log(1111);
          this.request.get("/file/page",
            {
              params:{
                name: this.tableNameTem,
                pageNum: this.pageNum,
                pageSize: this.pageSize
              }
            },
          ).then(res => {
            console.log(res.data);
            this.tableData1 = [];
            this.tableData1 = res.data.records;
            console.log(this.tableData1, "this.tableData1");
            this.total = res.data.total;
          })
        }
      }
    },
    // 刷新界面
    refresh() {
      this.$forceUpdate();
    },
    //用于shp文件上传的代码
    submitUpload() {
      this.$refs.upload.submit();
      this.$forceUpdate();
    },
    //on-remove 文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    //on-preview 点击文件列表中已上传的文件时的钩子
    handlePreview(file) {
      console.log(file);
    }

  },

}
</script>

<style lang="less" scoped>
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 8px; // 横向滚动条
  height: 8px; // 纵向滚动条 必写
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #dde;
  border-radius: 3px;
}
/*最外层透明*/
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background:rgba(9, 43, 67,0.1) !important;
}
/* 表格内背景颜色 */
::v-deep .el-table th {
  background:rgba(9, 43, 67,0.8) !important;
  color: #fff;
  font-size: 16px;
}
::v-deep .el-table tr,
::v-deep .el-table td {
  background:rgba(9, 43, 67,0.1) !important;
  color: #fff;
  font-size: 14px;
}
.uploadFile{
  z-index: 999;
}
</style>